<%@page import="com.kaishengit.dao.TodoDao"%>
<%@page import="com.kaishengit.entity.Todo"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/2.2.1/css/bootstrap.min.css">
	<style type="text/css">
		.lt{
			text-decoration:line-through;
		}
	</style>
	<title>Todo List</title>
</head>
<body>
	<div class="container" style="margin-top:30px">
		<!-- nav bar -->
		<div class="navbar">
		  <div class="navbar-inner">
		    <a class="brand" href="#">Todo List</a>
		   	<form id="todoForm" action="save.jsp" method="post" class="navbar-form pull-left">
			  <input type="text" name="todo" class="span6" id="todo">
			  <button type="button" class="btn" id="add_btn">Add Todo</button>
			</form>
		  </div>
		</div>
		<!-- end nav bar -->
		<table class="table">
			<tbody>
				<%
					List<Todo> todoList = (List<Todo>)request.getAttribute("list");
					for(Todo todo : todoList) {
				 %>
				<tr>
					<%
						if(todo.isDone()) {
					 %>
					<td width="20"><i class="icon icon-ok"></i></td>
					<td class="lt muted"><%=todo.getTodo() %></td>
					<td width="80">
						<a href="del.jsp?id=<%=todo.getId() %>">删除</a>
						<a href="edit.jsp?id=<%=todo.getId() %>">修改</a>
					</td>
					<%} else { %>
					<td width="20"><input type="checkbox" name="" class="ck" rel="<%=todo.getId() %>"></td>
					<td><%=todo.getTodo() %></td>
					<td width="80">
						<a href="del.jsp?id=<%=todo.getId() %>">删除</a>
						<a href="edit.jsp?id=<%=todo.getId() %>">修改</a>
					</td>
					<%} %>
				</tr>
				<%}
					if(todoList.isEmpty()) {
				 %>
				 	<td colspan="2">你还没有添加任何Todo</td>
				 <%} %>
			</tbody>
		</table>

	</div>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			$("#add_btn").click(function(){
				var todo = $("#todo").val();
				if(!todo) {
					$("#todo").focus();
				} else {
					$("#todoForm").submit();
				}
			});
			
			$(".ck").click(function(){
				var id = $(this).attr("rel");
				//alert(id);
				location.href = "done.jsp?id="+id;
			});
			
			
		});
	
	</script>
</body>
</html>
